import { computed, reactive, Ref, ref } from 'vue'

/** 缩放 */
export default function useZoom(zoomLevels: Ref<number[]>) {
  /** 缩放值 */
  const zoom = ref(1)

  /** 最小缩放值 */
  const min = computed(() => zoomLevels.value[0])

  /** 最大缩放值 */
  const max = computed(() => zoomLevels.value[zoomLevels.value.length - 1])

  /** 缩放级别 */
  const level = computed({
    /** 设置缩放级别 */
    set(val: number) {
      const minVal = min.value
      const maxVal = max.value

      if (val < minVal) {
        val = minVal
      } else if (val > maxVal) {
        val = maxVal
      }

      // 缩放值最多保留两位小数
      zoom.value = +val.toFixed(2)
    },

    /** 获取缩放值 */
    get: () => zoom.value
  })

  /** 缩放 */
  return reactive({
    /** 缩放级别 */
    level,

    /** 最小缩放值 */
    min,

    /** 最大缩放值 */
    max
  })
}
